<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    
    </style>
</head>
<body>
    <div id="wrap">
        <h2>哈哈哈哈</h2>
        <ul class="list one" id="ul" title="hello">
            <li id="first">01</li>
            <li class="second">02</li>
            <li>03</li>
            <li name="last">04</li>
        </ul>
    </div>
</body>
<script>
    // 元素节点的方法  => 操作属性节点(属性的增删改 查)

    // 属性节点 (写在标签内 和标签名以一个空格分隔)  => 依存于元素节点
    // 通过元素节点 相关的方法 操作属性节点

    // Element.getAttribute(key)      对应属性名获取属性值
    // Element.setAttribute(key,val)  对应属性名设置属性值  (没有就新增  有就修改)
    // Element.removeAttribute(key)   对应属性名删除属性

    var one = document.getElementsByClassName("one")[0]; // 节点本质 => 对象
    console.log(one);

    // 获取 
    // var _class  = one.getAttribute("class");
    // console.log(_class);

    // var id = one.getAttribute("id");
    // console.log(id);

    // var title = one.getAttribute("title");
    // console.log(title);


    // 设置(修改)
    // one.setAttribute("class","first");
    // one.setAttribute("id","demo");
    // one.setAttribute("title","你好");
    // console.log(one);

    // 删除
    one.removeAttribute("class");
    one.removeAttribute("id");
    one.removeAttribute("title");
    console.log(one);

    // 新增 (设置  没有就新增 => 有就修改)

    one.setAttribute("class","first");
    one.setAttribute("id","demo");
    one.setAttribute("title","你好");
    
    // 注意 H5开始,允许用户自定义属性(自己规定属性名和属性值)
    // (1) 以 data-属性名
    // (2) 自己随意定义  asd  abc
    one.setAttribute("asd","asd");
    one.setAttribute("data-index","0");
    
    var asd = one.getAttribute("asd");
    var index = one.getAttribute("data-index");
    console.log(asd);
    console.log(index);

    one.removeAttribute("asd");
    one.removeAttribute("data-index");

    console.log(one);






</script>
</html>